import React, { useEffect, useState } from 'react';
import { Button, Upload, UploadFile } from 'antd'
// import './style.css'
import axios from 'axios'
import { UploadChangeParam } from 'antd/es/upload';

const Index: React.FC = () => {
  const [urls, setUrls] = useState<string[]>([]);

  useEffect(() => {
    axios.get('/api/upload/oss/list').then(resp => {
      setUrls(resp.data.data.objects.map((v: any) => v.url))
    })
  }, [])

  const onChange = (e: UploadChangeParam<UploadFile<any>>) => {
    if (e.file.response) {
      const { data } = e.file.response;
      setUrls(urls => [...urls, data.url])
    }
  }
  return (
    <div>
      <Upload.Dragger
        multiple
        itemRender={() => ""}
        action="/api/upload/oss"
        onChange={e => onChange(e)}>
        <div style={{ height: 300 }}>
          <Button>点我上传</Button>
        </div>
      </Upload.Dragger>

      <div>
        {
          urls.map((v, i) => {
            return <img key={i} src={v} height={100} style={{ margin: 10 }} alt="" />
          })}
      </div>
    </div>
  )
}

export default Index
